<template>
    <div class="home">
        <div class="header">
                 <div class="header-left">
                     <dl>
                                                    <dd><span>男装</span></dd>
                                                    <dd><span>女装</span></dd>
                                                    <dd><span>童装</span></dd>
                                                    <dd><span>中古逸品</span></dd>
                                                    <dd><span>最新发售</span></dd>
                                                    <dd><span>折扣商品</span></dd>
                     </dl>
                 </div>

                   <div class="header-center">
                       <img src="https://static.hbx.com/bundles/hypebeastweb/images/hbx-logo.svg?1603090404" alt="HBX" class="site-header-logo loading" data-was-processed="true">

                   </div>
                  <div class="header-right">
                      <dl>
                                                      <dd><span>搜寻</span></dd>
                                                      <dd><span>登录</span></dd>
                                                      <dd><span>帮助</span></dd>
                                                      <dd><span>你的购物袋</span></dd>
                                                      <dd><img src="https://static.hbx.com/bundles/hypebeastweb/images/flags/cn.jpg?1603090404" class="loading" data-was-processed="true"></dd>
                                                      <dd><span>CNY</span></dd>
                      </dl>
                  </div>


        </div>





    </div>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped>
    .header{
        display: flex;
        justify-content: space-between;
        font-size: .24rem;
        font-weight: 700;
        font-family: Nimbus San D,Arial,sans-serif,Microsoft Yahei;
        border-bottom: solid 1px #000000;
    }
    .header-center{
        display: flex;
        justify-content: center;
        align-items: center;
    }

   .header-left{
       display:flex;
       justify-content: center;
       align-items: center;
   }
   .header-left dl{
       display: inline-flex;
   }
   .header-right dl{
       display: inline-flex;
   }
   .header-left dl dd{
       /*margin-left: .2rem;*/
       /*padding-top: .2rem;*/
   }

   .header-right {
       display: flex;
       justify-content: center;
       align-items: center;
   }
</style>